<template>
  <div
    style="
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #666;
        "
  >
    <div style="width: 100%">
      <span
        style="
                    font-size: 20px;
                    margin: 30px 40px;
                    display: inline-block;
                    color: #000;
                "
      >
        <i class="el-icon-document"></i>兑换单详情
      </span>
      <el-button
        @click="goback()"
        size="mini"
        round
        style="margin-left: 1000px"
        type="primary"
        >返回</el-button
      >
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>兑换单号：</span>
            <span>{{ this.memderdetailinfo.exchangeSeq }}</span>
          </div>
        </el-col>

        <!-- <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>兑换单状态：</span>
                        <span
                            v-if="this.memderdetailinfo.exchangeStatus == 1"
                            >{{ "待发货" }}</span
                        >
                        <span
                            v-if="this.memderdetailinfo.exchangeStatus == 2"
                            >{{ "已发货" }}</span
                        >
                        <span
                            v-if="this.memderdetailinfo.exchangeStatus == 3"
                            >{{ "配送中" }}</span
                        >
                        <span
                            v-if="this.memderdetailinfo.exchangeStatus == 4"
                            >{{ "已完成" }}</span
                        >
                    </div>
                </el-col> -->
        <!-- <el-col :span="6" :push="1">
                    <div class="grid-content bg-purple">
                        <span>兑换时间：</span>
                        <span>{{ this.memderdetailinfo.createTime }}</span> -->
        <!-- <span>赠送会员姓名：</span>
                        <span>{{ this.memderdetailinfo.userName }}</span>-->
        <!-- </div>
                </el-col> -->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺名称：</span>
            <span>{{ this.memderdetailinfo.storeName }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店铺授权编码：</span>
            <span>{{ this.memderdetailinfo.authCode }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店主姓名：</span>
            <span>{{ this.memderdetailinfo.storeOwnerName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>店主联系方式：</span>
            <span>{{ this.memderdetailinfo.cellPhoneNo }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>大区名称：</span>
            <span>{{ this.memderdetailinfo.upOrgZone }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>营销区域名称：</span>
            <span>{{ this.memderdetailinfo.baseName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>会员等级：</span>
            <span>{{ this.memderdetailinfo.gradeLevel }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>会员姓名：</span>
            <span>{{ this.memderdetailinfo.userName }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>会员手机号：</span>
            <span>{{ this.memderdetailinfo.cellPhoneNo }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>物流单号：</span>
            <span>{{ this.memderdetailinfo.deliveryNo }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>物流公司：</span>
            <span>{{ this.memderdetailinfo.deliveryCompany }}</span>
          </div>
        </el-col>
        <el-col :span="6" :push="1">
          <div class="grid-content bg-purple">
            <span>备注名称：</span>
            <span>{{ this.memderdetailinfo.remarkName }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="width: 100%">
      <span
        style="
                    font-size: 20px;
                    margin: 30px 40px;
                    display: inline-block;
                    color: #000;
                "
      >
        <i class="el-icon-goods"></i>兑换信息
      </span>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          prop="exchangeCount"
          align="right"
          label="兑换数量(瓶)"
        ></el-table-column>
        <el-table-column prop="createTime" label="兑换时间"></el-table-column>
        <el-table-column prop="exchangeStatus" label="兑换单状态">
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.exchangeStatus == 1"
                            >兑换成功</span
                        >
                        <span v-if="scope.row.exchangeStatus == 0"
                            >兑换失败</span
                        > -->
            <span v-if="scope.row.exchangeStatus == 1">待发货</span>
            <span v-if="scope.row.exchangeStatus == 2">已发货</span>
            <span v-if="scope.row.exchangeStatus == 3">配送中</span>
            <span v-if="scope.row.exchangeStatus == 4">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryTime" label="配送时间"></el-table-column>
        <el-table-column prop="completeTime" label="完成时间"></el-table-column>
      </el-table>
    </div>

    <div style="width: 100%">
      <span
        style="
                    font-size: 20px;
                    margin: 30px 40px;
                    display: inline-block;
                    color: #000;
                "
      >
        <i class="el-icon-s-goods"></i>兑换商品信息
      </span>
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          prop="tastCode"
          label="品鉴酒编码"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="packetName"
          label="酒红包名称"
          width="180"
        ></el-table-column>
        <el-table-column prop="name" label="品鉴酒名称"></el-table-column>
        <el-table-column
          prop="exchangeCount"
          align="right"
          label="兑换数量（瓶）"
        ></el-table-column>
        <el-table-column
          prop="exchangeAmount"
          align="right"
          label="兑换量(ml)"
        ></el-table-column>
      </el-table>
    </div>

    <!-- 审核 -->
    <div
      style="width: 100%"
      v-if="
        this.memderdetailinfo.exchangeStatus == 0 ||
          this.memderdetailinfo.exchangeStatus == 5
      "
    >
      <span
        style="
                    font-size: 20px;
                    margin: 30px 40px;
                    display: inline-block;
                    color: #000;
                "
      >
        <i class="el-icon-s-check"></i>审核兑换单
      </span>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="80px"
        style="width: 900px"
      >
        <!-- <el-form-item label="" prop="exchangeStatus">
    <el-radio-group v-model="ruleForm.exchangeStatus">
      <el-radio label="1">通过</el-radio>
      <el-radio label="5">驳回</el-radio>
    </el-radio-group>
  </el-form-item> -->
        <el-form-item label="" prop="exchangeStatus">
          <el-radio
            v-model="ruleForm.exchangeStatus"
            label="1"
            border
            :disabled="this.memderdetailinfo.exchangeStatus != 0"
            >通过</el-radio
          >
          <el-radio
            v-model="ruleForm.exchangeStatus"
            label="5"
            border
            :disabled="this.memderdetailinfo.exchangeStatus != 0"
            >驳回</el-radio
          >
        </el-form-item>

        <el-form-item
          label=""
          prop="rebackReason"
          v-if="ruleForm.exchangeStatus == 5"
        >
          <el-input
            type="textarea"
            v-model="ruleForm.rebackReason"
            :rows="3"
            placeholder="请填写驳回原因"
            clearable
            maxlength="30"
            show-word-limit
            :readonly="this.memderdetailinfo.exchangeStatus != 0"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="goback()">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :disabled="this.memderdetailinfo.exchangeStatus != 0"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { conversionInfo, reviewExchange } from '@/api/memberPrice';
import qs from 'qs';
export default {
  data() {
    return {
      memderdetailinfo: {},
      tableData: [],
      ruleForm: {
        exchangeStatus: '',
        rebackReason: '',
      },
      rules: {
        exchangeStatus: [
          { required: true, message: '请选择审核通过或驳回', trigger: 'blur' },
        ],
        rebackReason: [
          { required: true, message: '请填写驳回原因', trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    this.memderdetailinfo = this.$route.params.v;
    if (this.memderdetailinfo.exchangeStatus != 0) {
      this.ruleForm.exchangeStatus =
        this.memderdetailinfo.exchangeStatus == 5 ? '5' : '1';
      this.ruleForm.rebackReason = this.memderdetailinfo.rebackReason;
    }
    this._getTradeOrderInfo();
  },
  methods: {
    goback() {
      this.$router.go('-1');
    },
    _getTradeOrderInfo() {
      let data = {
        exchangeSeq: this.$route.params.v.exchangeSeq,
      };

      conversionInfo(data).then((res) => {
        this.tableData = res.records;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            uuid: this.memderdetailinfo.uuid,
            exchangeStatus: this.ruleForm.exchangeStatus,
            rebackReason: this.ruleForm.rebackReason,
          };
          reviewExchange(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'success',
              });
              this.$router.push('/queryExchangeForm');
            } else if (res.code == 0) {
              this.$message({
                showClose: true,
                message: res.message,
                type: 'error',
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  //   background: #99a9bf;
}
.bg-purple {
  //   background: #d3dce6;
}
.bg-purple-light {
  //   background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  //   background-color: #f9fafc;
}
</style>
